<template>
  <div class="wrap">
    <div class="moudle-title">人员进出情况</div>
    <div class="content-list">
      <el-table
        ref="myTable"
        :data="noticeData"
        height="180px"
        :show-header="false"
        @mouseover="clearScroll"
        @mouseleave="createScroll"
        :row-style="rowClass"
        size="small"
      >
        <el-table-column label="姓名" prop="personName" width="70" align="center"></el-table-column>
        <el-table-column label="位置" prop="doorName" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="时间" prop="eventTime" width="80" align="center">
          <template #default="scope">{{ subString2(scope.row.eventTime) }} </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import sppApi from '@/api/spp'

export default {
  name: 'SppCenterBottomRight',
  data() {
    return {
      noticeData: [],
      timer: {}
    }
  },
  mounted() {
    this.initLoadData()
    let speed = 60000
    const self = this
    let theNowTime = function () {
      self.initLoadData()
    }
    setInterval(theNowTime, speed)
    this.createScroll()
  },
  unmounted() {
    this.clearScroll()
  },
  methods: {
    rowClass({ row }) {
      return row.inAndOutType === 1 ? 'color: greenyellow' : 'color: #2EC8CF'
    },
    clearScroll() {
      clearInterval(this.timer)
      this.timer = null
    },
    createScroll() {
      this.clearScroll()
      // 拿到 table
      const table = this.$refs.myTable.layout.table.refs
      // 拿到可以滚动的元素
      const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

      this.timer = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
          tableWrapper.scrollTop = 0
        }
      }, 50)
    },
    subString2(str) {
      str = str + '000'
      return str.substring(11, 19)
    },
    initLoadData() {
      sppApi.getInoutListPage2().then((res) => {
        if (res.code === 200) {
          this.noticeData = res.data.records
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.wrap {
  padding: 10px 0 0 0;
}

.moudle-title {
  color: #50e9ff;
  font-size: 16px;
  text-align: center;
}

.content-list {
  padding: 0 30px;
  color: #147dcf;
  font-size: 14px;
  margin-top: 2px;

  .content-item {
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
  }
}

.temper-scroll {
  height: 230px;
  width: 380px;
  margin: 30px auto;
  overflow: hidden;
  .scroll-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 15px;
    color: #147dcf;
  }
}

.incss {
  color: greenyellow;
}

.outcss {
  color: #147dcf;
}
</style>
